﻿﻿﻿<%@ page contentType="text/html;charset=UTF-8" language="java"  isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<div class="layui-row layui-col-space15">

    <div class="layui-add-line"></div>
    <fieldset class="layui-elem-field layui-field-title" style="margin:0px;">
        <legend class="layui-add-title">技术人员</legend>
    </fieldset>

    <!--通用按钮盒子-->
    <div class="layui-col-md12" style="padding-top: 10px;padding-bottom: 10px">
        <div class="layui-btn-group demoTable">
            <a class="layui-btn layui-btn-sm" onclick="addPersonnel()">新增+</a>
        </div>
    </div>

    <div class="layui-col-md12">
        <table class="layui-table" id="artisanTable" lay-filter="artisanTable">
            <thead>
            <tr>
                <th>姓名</th>
                <th>职务</th>
                <th>身份证</th>
                <th>文化程度与专业</th>
                <th>职称</th>

                <th>从事相关行业时间</th>
                <th>职业资格证</th>
                <th>任命文件</th>
                <th lay-data="{field:'right',toolbar:'#barDemo',width:360}">操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${personnelServiceList2}" var="info">
                <tr>
                    <td>${info.name}</td>
                    <td>${info.post}</td>
                    <td>${info.identityCard}</td>
                    <td>${info.educationBackground}</td>
                    <td>${info.jobTitle}</td>

                    <td>${info.workYears}</td>
                    <td>
                        <img src="${ctx}/${info.certificate}" style="max-width: 60px; max-height: 60px; cursor: pointer;" onclick="previewImage('${info.certificate}')" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                        <div style="display:none; color: #999; font-size: 12px;">图片加载失败</div>
                    </td>
                    <td>
                        <a class="layui-btn layui-btn-sm" onclick="downloadFun('${info.appointmentDocument}')">下载</a>
                    </td>
                    <td>
                        <a class="layui-btn layui-btn-sm" onclick="editPersonnel('${info.id}')">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-sm" onclick="deletePersonnel('${info.id}')">删除</a>
                    </td>
                </tr>
            </c:forEach>
            <c:if test="${empty personnelServiceList2}">
                <tr>
                    <td colspan="10" style="text-align: center;">没有数据</td>
                </tr>
            </c:if>
            </tbody>
        </table>

    </div>
</div>

<script>
    //下载文件
    function downloadFun(path) {
        const filename = path.replace('/files/', '');
        window.location.href = '${ctx}/managementSystem/download/' + filename;
    }

    //预览图片
    function previewImage(src) {
        console.log('原始路径:', src); // 调试信息
        // 确保路径正确
        var fullPath = src.startsWith('/') ? '${ctx}' + src : '${ctx}/' + src;
        console.log('完整路径:', fullPath); // 调试信息

        // 使用原生 JavaScript 创建模态框
        var modal = document.createElement('div');
        modal.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; display: flex; justify-content: center; align-items: center;';
        modal.onclick = function() {
            document.body.removeChild(modal);
        };

        var imgContainer = document.createElement('div');
        imgContainer.style.cssText = 'position: relative; max-width: 90%; max-height: 90%; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.3);';
        imgContainer.onclick = function(e) {
            e.stopPropagation();
        };

        var closeBtn = document.createElement('div');
        closeBtn.innerHTML = '×';
        closeBtn.style.cssText = 'position: absolute; top: 10px; right: 15px; font-size: 24px; color: #999; cursor: pointer; z-index: 10000;';
        closeBtn.onclick = function() {
            document.body.removeChild(modal);
        };

        var img = document.createElement('img');
        img.src = fullPath;
        img.style.cssText = 'max-width: 100%; max-height: 500px; display: block;';
        img.onerror = function() {
            console.log('图片加载失败，路径:', this.src);
            img.style.display = 'none';
            var errorDiv = document.createElement('div');
            errorDiv.innerHTML = '图片加载失败，请检查路径: ' + fullPath;
            errorDiv.style.cssText = 'color: #999; font-size: 14px; text-align: center; padding: 20px;';
            imgContainer.appendChild(errorDiv);
        };

        imgContainer.appendChild(closeBtn);
        imgContainer.appendChild(img);
        modal.appendChild(imgContainer);
        document.body.appendChild(modal);
    }
    layui.use(['jquery', 'layer'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;

        // 绑定新增按钮事件
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            if (type) {
                layer.msg("操作类型: " + type);
            } else {
                // 默认处理新增按钮点击
                addPersonnel();
            }
        });
    });

    // 新增函数
    function addPersonnel() {
        console.log('新增按钮被点击，ID:', '${param.enterpriseId}');
        var enterpriseId = '${param.enterpriseId}';
        window.location.href = '${ctx}/enterprise/personnel/add/' + enterpriseId;
    }

    // 编辑函数
    function editPersonnel(id) {
        console.log('编辑按钮被点击，ID:', id);
        window.location.href = '${ctx}/enterprise/personnel/edit/' + id;
    }

    function deletePersonnel(id) {
        console.log('deletePersonnel called with id:', id); // 检查函数是否被调用
        layui.use(['layer', 'jquery'], function() {
            var layer = layui.layer;
            var $ = layui.jquery;

            layer.confirm('确认删除？', {
                btn: ['确认', '取消'] // 按钮
            }, function(index) {
                $.post("${ctx}/enterprise/personnelRemove", {id: id}, function(res) {
                    if (res === 'success') {
                        layer.msg("删除成功");
                        location.reload(); // 刷新页面
                    } else {
                        layer.msg("删除失败: " + res);
                    }
                }).fail(function(err) {
                    layer.msg("请求失败: " + err.statusText);
                });
                layer.close(index);
            }, function(index) {
                layer.close(index);
            });
        });
    }
</script>

